<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>饮料饮用建议</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/pingce.css">
<script src="js/jq-slid.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body >
<!-- 头部Tab切换开始 -->
	<div class="slideTxtBox">
		<div class="hd"> 
			<span class="arrow"><a class="nexts"></a></span>
			<span class="arrows"><a class="prevs"></a></span>
		  <ul>
			<li value="16" onclick="showdesc(this)">茶类</li>
			<li value="17" onclick="showdesc(this)">酒类</li>
			<li value="18" onclick="showdesc(this)">功能类</li>
			<li value="19" onclick="showdesc(this)">碳酸类</li>
			<li value="20" onclick="showdesc(this)">乳制品</li>
			<li value="21" onclick="showdesc(this)">咖啡</li>
            <li value="22" onclick="showdesc(this)">果汁</li>
		  </ul>
		</div>
		<div class="bd">
<ul>	  
    <li><p>饮用量:<span id="data1"></span>ml</p>
    <p id="desc1"></p>
    </li> 
</ul>
<ul>	  
    <li><p>饮用量:<span id="data2"></span>ml</p>
        <p id="desc2"></p>
    </li> 
</ul>
<ul>	  
    <li><p>饮用量:<span id="data3"></span>ml</p>
    <p id="desc3"></p>
    </li> 
</ul>
<ul>	  
        <li><p>饮用量:<span id="data4"></span>ml</p>
        <p id="desc4"></p>
        </li> 
</ul>
<ul>	  
        <li><p>饮用量:<span id="data5"></span>ml</p>
        <p id="desc5"></p>
        </li> 
</ul>
<ul>	  
   <li><p>饮用量:<span id="data6"></span>ml</p>
       <p id="desc6"></p>
   </li> 
</ul>
<ul>	  
   <li><p>饮用量:<span id="data7"></span>ml</p>
    <p id="desc7"></p>
</li> 
</ul>
		</div>
	</div>
<!-- 头部Tab切换结束 -->
<!-- 内容提交区开始 -->
	<div class="main-txt">
		<p><span>饮料类型：</span>
			<input hidden value="1" name="cate_id" id="cate_id">
			<select name="cate" id="cate">
                    <option value="16">茶类</option>
                    <option value="17">酒类</option>
                    <option value="18">功能类</option>
                    <option value="19">碳酸类</option>
                    <option value="20">乳制品</option>
                    <option value="21">咖啡</option>
                    <option value="22" id="tnext">果汁</option>
			</select>
		</p>
		<p><span>饮料量：</span> &nbsp;&nbsp;
			<select name="spec" id="spec">
				<option value="300">0-300ml</option>
				<option value="500">300-500ml</option>
				<option value="1000">500-1000ml</option>
				<option value="2000">1000-2000ml</option>
			</select>
		</p>
		<p class="btns">
			<button  class="btn btn-primary" onclick="sub(this)">提交</button>
		</p>
	</div>
<!-- 内容提交区结束 -->
<!-- 切换区域js开始 -->
<script type="text/javascript">
	jQuery(".slideTxtBox").slide();

	$(".arrow").click(function(){
		$(".hd ul").css("left","-85%");
			$(".hd ul li:last-child").addClass("on").siblings().removeClass("on");
			$(".bd ul:last-child").show().siblings().hide()
	})

	$(".arrows").click(function(){
		$(".hd ul").css("left","1rem");
			$(".hd ul li:first-child").addClass("on").siblings().removeClass("on");
			$(".bd ul:first-child").show().siblings().hide()
	})

	$.ajax({
	url:"/user/catedesc?cate_id=1&sec_cate_id=16",
	type:"GET",
	dataType:"json",
	success:function(data){
				$("#data1").text(data.data);
				$("#desc1").html(data.desc);
		}
	});

	$.ajax({
	url:"/user/catedesc?cate_id=1&sec_cate_id=22",
	type:"GET",
	dataType:"json",
	success:function(data){
				$("#data7").text(data.data);
				$("#desc7").html(data.desc);
		}
	});

	function sub(a){
		var cate_id = $("#cate_id").val();
		var cate = $("#cate option:selected").val();
		var spec = $("#spec option:selected").val();
		$.ajax({
			url:"/user/submitdata?cate_id="+cate_id+"&cate="+cate+"&spec="+spec,
			type:"get",
			dataType:"json",
			success:function(data){
				console.log(data);
				alert(data);
			}
		})
	}


	function showdesc(a){
	$.ajax({
		url:"/user/catedesc?cate_id=1&sec_cate_id="+a.value,
		type:"GET",
		dataType:"json",
		success:function(data){
			if(a.value==16){
				$("#data1").text(data.data);
				$("#desc1").html(data.desc);
			}else if(a.value==17){
				$("#data2").text(data.data);
				$("#desc2").html(data.desc);
			}else if(a.value==18){
				$("#data3").text(data.data);
				$("#desc3").html(data.desc);
			}else if(a.value==19){
				$("#data4").text(data.data);
				$("#desc4").html(data.desc);
			}else if(a.value==20){
				$("#data5").text(data.data);
				$("#desc5").html(data.desc);
			}else if(a.value==21){
				$("#data6").text(data.data);
				$("#desc6").html(data.desc);
			}else if(a.value==22){
				$("#data7").text(data.data);
				$("#desc7").html(data.desc);
			}
		}
	});
}
</script>
<!-- 切换区域js结束 -->
</body>
</html>